<script setup name="Aside">
import {baseStore} from "@/store/baseStore";

let bs = baseStore()
let {menuFoldState, menuState} = storeToRefs(bs)

const path = ref(useRouter().currentRoute.value.path)
watch(useRouter().currentRoute, (nv, ov) => {
    path.value = nv.path
})
</script>
<template>
    <el-menu
        :default-active="path"
        class="el-menu-vertical"
        :router="true"
        :menu-trigger="'hover'"
        :collapse="menuFoldState"
    >
        <!-- el-sub-menu和el-menu-item 可能会有多层嵌套，所以抽取出来封装成递归组件-->
        <AsideMenu :route="menuState.menu"></AsideMenu>
    </el-menu>
</template>

<style lang="scss" scoped>
.el-menu-vertical:not(.el-menu--collapse) {
    width: 200px;
}

.el-menu-vertical {
    height: 100%;
    overflow: hidden;
    overflow-y: auto;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.aside-fold {
    height: 35px;
    width: 100%;
    cursor: pointer;
}

.aside-fold-icon {
    width: 1em;
    height: 1em;
    margin: auto;
}

/** 滑动柱宽度 */
::-webkit-scrollbar {
    width: 2px;
}

/** 滑动柱外的样式 */
::-webkit-scrollbar-track {
    background: #fff;
}

/** 滑动柱的默认样式 */
::-webkit-scrollbar-thumb {
    background: #4C4D4F;
}

/** 鼠标经过样式 */
::-webkit-scrollbar-thumb:hover {
    background: #4C4D4F;
}

/** 鼠标摁住样式 */
::-webkit-scrollbar-thumb:active {
    background: #4C4D4F;
}
</style>